[Android] Lottieでかわいいアニメーションを表示してみた

#Android

浜田瑛樹

2018.12.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

モバイルアプリサービス部の浜田です！

最近、アプリを使っていると軽快なアニメーションを見かけることが増えてきました。

どう実装されているの？GIF画像？それともコードでゴリゴリ書くの？と思って調べてみると、「Lottie」というライブラリが見つかったので、Android向けのライブラリを試してみました。

iOS向けのライブラリについては以下の記事を参考にしてください。

[iOS][Swift4.0] After Effectsのアニメーションを手軽に入れられるlottie-ios ｜ DevelopersIO

Lottieとは

Lottie

「Adobe After Effects」で作成されたアニメーションは、「Bodymovin」という拡張機能を使用することでJSONファイルとして出力できます。

このJSONファイルを使用して、Lottieは様々なプラットフォームで同じアニメーションを表示・制御できます。

2018年12月現在、以下のプラットフォーム向けのライブラリが活発に開発・メンテナンスされているようです。

Android: github.com/airbnb/lottie-android
iOS: github.com/airbnb/lottie-ios
Web: github.com/airbnb/lottie-web
React Native: github.com/react-native-community/lottie-react-native

そのほか、モバイル(Xamarin、NativeScript、Titanium、Windows UWP)、Webフレームワーク(React、Vue、Angular)向けのライブラリが、Lottieコミュニティの有志によって開発されています。

Other Platforms · Lottie

環境

Android Studio

Android Studio 3.2.1
Build #AI-181.5540.7.32.5056338, built on October 9, 2018
JRE: 1.8.0_152-release-1136-b06 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
macOS 10.14.2

動作検証端末

下記設定のエミュレータ。

Pixel 2 Android 9.0 (API 28) x86
Nexus 4 Android 4.4 (API 19) x86

使用するライブラリのバージョン

この記事ではLottie for Androidのバージョン2.8.0を使用しました。

airbnb/lottie-android at v2.8.0

下記のコミットでREADMEに記載されたとおり、2.8.0以降のバージョンはAndroid Xのプロジェクトでのみ使用できます。

Improved README and CHANGELOG regarding androidx. · airbnb/lottie-android@65c5ee8

Lottie 2.8.0 and above only supports projects that have been migrated to androidx for more information, read Google's migration guide.

新規プロジェクトの作成

まず、Android Studioを使用して新規プロジェクトを作成します。以下の設定で、アプリケーション名などは任意のものを指定してください。

Create Android Project:
- include Kotlin support: ON
Target Android Devices:
- Phone and Tablet: ON
Add an Activity to Mobile:
- Empty Activityを選択
Configure Activity:
- Activity Name: MainActivityを入力
  - Generate Layout File: ON
- Layout Name: activity_mainを入力
  - Backwards Compatibility (AppCompat): ON

Android Xのプロジェクトへ移行

Android Studio 3.2.1で作成した新規プロジェクトは、まだAndroid Xを利用する設定にはなっていません。使用するLottieのバージョン2.8.0ではAndroid Xのプロジェクトのみサポートしているため、移行する必要があります。

Android StudioのメニューからRefactor > Migrate to AndroidX...を実行して、各種ファイルをAndroid Xの設定に移行します。

Migrating to AndroidX | Android Developers

build.gradleにLottieのリポジトリを追加

dependencies {
    // ...
    implementation "com.airbnb.android:lottie:2.8.0"
    // ...
}

アニメーションのJSONファイルを入手

今回は「LottieFiles - Free animation files build for Lottie, Bodymovin」というWebサイトで公開されている以下のアニメーションのファイルを使用させていただきました。

Favourite app icon - LottieFiles

JSONファイルをプロジェクトに追加

ダウンロードしたファイルをプロジェクトのrawリソースフォルダに追加します。

JSONファイルの保存先

レイアウトにアニメーションを表示するViewを追加

次のようにcom.airbnb.lottie.LottieAnimationViewを追加します。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/favourite_app_icon" />

</androidx.constraintlayout.widget.ConstraintLayout>

LottieAnimationViewの独自の属性で次の設定を行っています。